<template>
  <div id="vote">
    <div class="vote-top">
      <p>{{Title}}</p>
      <p><i class="fa fa-clock-o" aria-hidden="true"></i><span>截止&nbsp</span>{{endTime}}</p>
    </div>
    <div class="top">
      <div class="vote-main" v-for="(item, index) in objectList1" :key="index">
        <p class="area">{{index+1}}.{{item.title}}(单选)</p>
        <div class="vote-list" v-for="(item1, index1) in item.vipOptionList" :key="index1">
          <span v-if="isShowOrHide" class="vote-icon"></span>
          <div @click="clickActive1(index, index1)">
            <div class="left">
              <check-icon :value.sync="item1.value"></check-icon>
            </div>
            <div class="right">
              <div class="pic">
                <img :src="item1.img" height="45px" width="45px">
              </div>
              <div class="txt">
                <p>{{item1.name}}</p>
                <p class="progbar" v-if="isShow">
                  <span class="progbar1" :style="{ width: item1.width1 + '%'}"></span>
                  <span class="prognum" >{{item1.width1}}%</span>
                 </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="vote-main" v-for="(item, index) in objectList2">
        <p class="area">{{index+1}}.{{item.title}}(多选)</p>
        <div class="vote-list" v-for="(item1, index1) in item.vipOptionList" :key="index1">
          <span v-if="isShowOrHide" class="vote-icon"></span>
          <div @click="clickActive2(index, index1)">
            <div class="left">
              <check-icon :value.sync="item1.value" @click.native="clickActive2(index, index1)"></check-icon>
            </div>
            <div class="right">
              <div class="pic">
                <img :src="item1.img" height="45px" width="45px">
              </div>
              <div class="txt">
                <p>{{item1.name}}</p>
                <p class="progbar" v-if="isShow">
                  <span class="progbar1" :style="{ width: item1.width1 + '%'}"></span>
                  <span class="prognum" >{{item1.width1}}%</span>
                 </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div >
      <alert v-model="alert" >{{title}}</alert>
    </div>
    <div style="padding:30px 20px;">
      <x-button type="primary" :text="text" :disabled="disabled" action-type="button" @click.native="saveCustActivityVote(Title)"></x-button>
    </div>
  </div>
</template>
<script>
  import { CheckIcon, XButton, Alert } from 'vux'
  export default {
    name: 'vote',
    data () {
      return {
        Title: '',
        endTime: '',
        alert: false,
        title: '',
        data: [],
        isShow: false,
        isShowOrHide: false,
        text: '',
        disabled: false,
        fullValues: [],
        length: [],
        objectList: [],
        objectList1: [],
        objectList2: [],
        num1: [],
        num2: []
      }
    },
    created () {
      this.queryCustActivityVote()
    },
    components: {
      CheckIcon,
      XButton,
      Alert
    },
    methods: {
      getData () {
        for (let j = 0; j < this.objectList1.length; j++) {
          for (let k = 0; k < this.objectList1[j].vipOptionList.length; k++) {
            if (this.objectList1[j].vipOptionList[k].value === true) {
              this.data.push(this.objectList1[j].vipOptionList[k].id)
            }
          }
        }
        for (let j = 0; j < this.objectList2.length; j++) {
          for (let k = 0; k < this.objectList2[j].vipOptionList.length; k++) {
            if (this.objectList2[j].vipOptionList[k].value === true) {
              this.data.push(this.objectList2[j].vipOptionList[k].id)
            }
          }
        }
        return this.data.slice()
      },
      clickActive1 (index, index1) {
        for (let j = 0; j < this.objectList1.length; j++) {
          for (let k = 0; k < this.objectList1[j].vipOptionList.length; k++) {
            this.$set(this.objectList1[index].vipOptionList[k], 'value', false)
            this.$set(this.objectList1[index].vipOptionList[index1], 'value', true)
          }
        }
      },
      clickActive2 (index, index1) {
        for (let j = 0; j < this.objectList2.length; j++) {
          for (let k = 0; k < this.objectList2[j].vipOptionList.length; k++) {
            if ((this.objectList2[index].vipOptionList[index1].value === true)) {
              this.$set(this.objectList2[index].vipOptionList[index1], 'value', false)
            } else {
              this.$set(this.objectList2[index].vipOptionList[index1], 'value', true)
            }
          }
        }
      },
      queryCustActivityVote () {
        this.$axios.post(this.apidomain + '/api/activity/getVoteActivityDetail/' + this.getCookie('appid'), {
          id: this.$route.query.id,
          openId: this.getCookie('openid')
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.Title = response.data.data.title
            this.endTime = response.data.data.endTime
            if (response.data.data.state === 0 && response.data.data.status === '进行中') {
              this.disabled = false
              this.isShow = false
              this.text = '投票'
              for (let i = 0; i < response.data.data.configList.length; i++) {
                if (response.data.data.configList[i].type === 1) {
                  this.objectList1.push(response.data.data.configList[i])
                }
                if (response.data.data.configList[i].type === 2) {
                  this.objectList2.push(response.data.data.configList[i])
                }
              }
              for (let j = 0; j < this.objectList1.length; j++) {
                this.num1.push(0)
                for (let k = 0; k < this.objectList1[j].vipOptionList.length; k++) {
                  this.$set(this.objectList1[j].vipOptionList[k], 'value', false)
                  this.num1[j] += this.objectList1[j].vipOptionList[k].votedNum
                }
              }
              for (let j = 0; j < this.objectList2.length; j++) {
                this.num2.push(0)
                for (let k = 0; k < this.objectList2[j].vipOptionList.length; k++) {
                  this.$set(this.objectList2[j].vipOptionList[k], 'value', false)
                  this.num2[j] += this.objectList2[j].vipOptionList[k].votedNum
                }
              }
              this.objectList = this.objectList1.concat(this.objectList2)
            } else if (response.data.data.state === 1 && response.data.data.status === '进行中') {
              this.disabled = true
              this.isShow = true
              this.text = '你已投票'
              this.isShowOrHide = true
              for (let i = 0; i < response.data.data.configList.length; i++) {
                if (response.data.data.configList[i].type === 1) {
                  this.objectList1.push(response.data.data.configList[i])
                }
                if (response.data.data.configList[i].type === 2) {
                  this.objectList2.push(response.data.data.configList[i])
                }
              }
              for (let j = 0; j < this.objectList1.length; j++) {
                this.num1.push(0)
                for (let k = 0; k < this.objectList1[j].vipOptionList.length; k++) {
                  this.$set(this.objectList1[j].vipOptionList[k], 'value', false)
                  // console.log(this.objectList1[0].vipOptionList[k].votedNum)
                  this.num1[j] += this.objectList1[j].vipOptionList[k].votedNum
                }
              }
              for (let j = 0; j < this.objectList2.length; j++) {
                this.num2.push(0)
                for (let k = 0; k < this.objectList2[j].vipOptionList.length; k++) {
                  this.$set(this.objectList2[j].vipOptionList[k], 'value', false)
                  this.num2[j] += this.objectList2[j].vipOptionList[k].votedNum
                }
              }
              for (let i = 0; i < this.objectList1.length; i++) {
                for (let j = 0; j < this.objectList1[i].vipOptionList.length; j++) {
                  if (this.objectList1[i].vipOptionList[j].indexWt === '1') {
                    this.$set(this.objectList1[i].vipOptionList[j], 'value', true)
                  }
                  if (this.num1[i] !== 0) {
                    this.$set(this.objectList1[i].vipOptionList[j], 'width1', ((this.objectList1[i].vipOptionList[j].votedNum / this.num1[i]) * 100).toFixed(2))
                  } else {
                    this.$set(this.objectList1[i].vipOptionList[j], 'width1', 0)
                  }
                }
              }
              for (let i = 0; i < this.objectList2.length; i++) {
                for (let j = 0; j < this.objectList2[i].vipOptionList.length; j++) {
                  if (this.objectList2[i].vipOptionList[j].indexWt === '1') {
                    this.$set(this.objectList2[i].vipOptionList[j], 'value', true)
                  }
                  if (this.num2[i] !== 0) {
                    this.$set(this.objectList2[i].vipOptionList[j], 'width1', ((this.objectList2[i].vipOptionList[j].votedNum / this.num2[i]) * 100).toFixed(2))
                  } else {
                    this.$set(this.objectList2[i].vipOptionList[j], 'width1', 0)
                  }
                }
              }
            } else if (response.data.data.state === 0 && response.data.data.status === '已结束') {
              this.disabled = true
              this.isShow = false
              this.text = '已结束'
              this.isShowOrHide = true
              for (let i = 0; i < response.data.data.configList.length; i++) {
                if (response.data.data.configList[i].type === '1') {
                  this.objectList1.push(response.data.data.configList[i])
                }
                if (response.data.data.configList[i].type === '2') {
                  this.objectList2.push(response.data.data.configList[i])
                }
              }
              for (let j = 0; j < this.objectList1.length; j++) {
                this.num1.push(0)
                for (let k = 0; k < this.objectList1[j].vipOptionList.length; k++) {
                  this.$set(this.objectList1[j].vipOptionList[k], 'value', false)
                  this.num1[j] += this.objectList1[j].vipOptionList[k].votedNum
                }
              }
              for (let j = 0; j < this.objectList2.length; j++) {
                this.num2.push(0)
                for (let k = 0; k < this.objectList2[j].vipOptionList.length; k++) {
                  this.$set(this.objectList2[j].vipOptionList[k], 'value', false)
                  this.num2[j] += this.objectList2[j].vipOptionList[k].votedNum
                }
              }
              this.objectList = this.objectList1.concat(this.objectList2)
            } else if (response.data.data.state === 1 && response.data.data.status === '已结束') {
              this.disabled = true
              this.isShow = true
              this.text = '你已投票'
              this.isShowOrHide = true
              for (let i = 0; i < response.data.data.configList.length; i++) {
                if (response.data.data.configList[i].type === 1) {
                  this.objectList1.push(response.data.data.configList[i])
                }
                if (response.data.data.configList[i].type === 2) {
                  this.objectList2.push(response.data.data.configList[i])
                }
              }
              for (let j = 0; j < this.objectList1.length; j++) {
                this.num1.push(0)
                for (let k = 0; k < this.objectList1[j].vipvipOptionList.length; k++) {
                  this.$set(this.objectList1[j].vipOptionList[k], 'value', false)
                  this.num1[j] += this.objectList1[j].vipOptionList[k].votedNum
                }
              }
              for (let j = 0; j < this.objectList2.length; j++) {
                this.num2.push(0)
                for (let k = 0; k < this.objectList2[j].vipOptionList.length; k++) {
                  this.$set(this.objectList2[j].vipOptionList[k], 'value', false)
                  this.num2[j] += this.objectList2[j].vipOptionList[k].votedNum
                }
              }
              for (let i = 0; i < this.objectList1.length; i++) {
                for (let j = 0; j < this.objectList1[i].vipOptionList.length; j++) {
                  if (this.objectList1[i].vipOptionList[j].indexWt === '1') {
                    this.$set(this.objectList1[i].vipOptionList[j], 'value', true)
                  }
                  if (this.num1[i] !== 0) {
                    this.$set(this.objectList1[i].vipOptionList[j], 'width1', ((this.objectList1[i].vipOptionList[j].votedNum / this.num1[i]) * 100).toFixed(2))
                  } else {
                    this.$set(this.objectList1[i].vipOptionList[j], 'width1', 0)
                  }
                }
              }
              for (let i = 0; i < this.objectList2.length; i++) {
                for (let j = 0; j < this.objectList2[i].vipOptionList.length; j++) {
                  if (this.objectList2[i].vipOptionList[j].indexWt === '1') {
                    this.$set(this.objectList2[i].vipOptionList[j], 'value', true)
                  }
                  if (this.num2[i] !== 0) {
                    this.$set(this.objectList2[i].vipOptionList[j], 'width1', ((this.objectList2[i].vipOptionList[j].votedNum / this.num2[i]) * 100).toFixed(2))
                  } else {
                    this.$set(this.objectList2[i].vipOptionList[j], 'width1', 0)
                  }
                }
              }
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
      },
      saveCustActivityVote (Title) {
        window.zhuge.track('Click', {
          '事件名称': '会员中心-会员活动-互动活动-活动名称-我要参加-投票-点击',
          '访问时间': new Date().toLocaleString(),
          'OpenID': this.getCookie('openid'),
          '活动名称': Title
        })
        for (let i = 0; i < this.objectList.length; i++) {
          for (let j = 0; j < this.objectList[i].vipOptionList.length; j++) {
            if (this.objectList[i].vipOptionList[j].value === true) {
              this.length.push(this.objectList[i].vipOptionList[j].value)
            }
          }
        }
        if (this.length.length !== 0) {
          this.$axios.post(this.apidomain + '/api/activity/saveVoteActivityOption/' + this.getCookie('appid'), {
            openId: this.getCookie('openid'),
            id: Number(this.$route.query.id),
            data: this.getData()
          })
          .then((response) => {
            if (response.data.errorCode === '0') {
              this.isShowOrHide = true
              for (let i = 0; i < this.objectList1.length; i++) {
                for (let j = 0; j < this.objectList1[i].vipOptionList.length; j++) {
                  if (this.objectList1[i].vipOptionList[j].value === true) {
                    this.num1[i]++
                  }
                }
              }
              for (let i = 0; i < this.objectList2.length; i++) {
                for (let j = 0; j < this.objectList2[i].vipOptionList.length; j++) {
                  if (this.objectList2[i].vipOptionList[j].value === true) {
                    this.num2[i]++
                  }
                }
              }
              for (let i = 0; i < this.objectList1.length; i++) {
                for (let j = 0; j < this.objectList1[i].vipOptionList.length; j++) {
                  if (this.objectList1[i].vipOptionList[j].value === true) {
                    this.objectList1[i].vipOptionList[j].votedNum++
                  }
                  if (this.num1[i] !== 0) {
                    this.$set(this.objectList1[i].vipOptionList[j], 'width1', ((this.objectList1[i].vipOptionList[j].votedNum / this.num1[i]) * 100).toFixed(2))
                  } else {
                    this.$set(this.objectList1[i].vipOptionList[j], 'width1', 0)
                  }
                }
              }
              for (let i = 0; i < this.objectList2.length; i++) {
                for (let j = 0; j < this.objectList2[i].vipOptionList.length; j++) {
                  if (this.objectList2[i].vipOptionList[j].value === true) {
                    this.objectList2[i].vipOptionList[j].votedNum++
                  }
                  if (this.num2[i] !== 0) {
                    this.$set(this.objectList2[i].vipOptionList[j], 'width1', ((this.objectList2[i].vipOptionList[j].votedNum / this.num2[i]) * 100).toFixed(2))
                  } else {
                    this.$set(this.objectList2[i].vipOptionList[j], 'width1', 0)
                  }
                }
              }
              // console.log(this.num1)
              // console.log(this.num2)
              this.isShow = true
              this.disabled = true
              this.alert = true
              this.title = '投票成功'
            } else {
              this.alert = true
              this.title = '报名失败'
            }
          })
          .catch(function (error) {
            console.log(error)
          })
        } else {
          this.alert = true
          this.title = '请选择你喜爱的店员给他一票吧'
        }
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/vote/vote.less";
</style>
